<template>
  <div>
    <van-tree-select
      height="100%"
      :items="items"
      :main-active-index.sync="active"
     @click-nav="changindex"
    >
      <template #content>
          <div v-if="items.length" class="right">
          <h3>{{items[n].text}}</h3>
         <div v-if="active === n"  >
         <div v-for="item in items[n].children" :key="item.id" class="show" @click="$router.push('/list?id='+item.id+'&type=2')">
               <!-- <div v-if="items[n].children" @click="$router.push('/list?id='+item.id+'&type=2')"> -->
             <img :src="$pre+item.img" alt="">
             <h4>{{item.catename}}</h4>
         </div>
      </div>
      </div>
      </template>
    </van-tree-select>
  </div>
</template>
<script>
import {reqcates} from '../../http/http'
export default {
    data() {
        return {
            n:0,
             active:0,
             index:0,
        

      items:[],
        }
        arr;[]
    },
    mounted() {
     
        reqcates().then(res=>{
            // console.log(res);
            // console.log(this.items[0].text);
       
            // console.log(res.data.list);
                   this.items= res.data.list.map(item=>({
                         text:item.catename,
                         children:item.children,
                         id:item.id,
                         img:item.img,
                         pid:item.pid,
                         status:item.status
          }))
             console.log(this.items);
                    //   console.log(this.items[this.n].children);
                            // res.data.list.forEach(item=> {
                            //     //   console.log(item);
                             
                             
                            //       this.items.push({text:item.catename})
                            //       console.log(this.items);
                            

            
                            // });
        })
    },
    methods: {
        changindex(e){
            console.log(e);
            this.n=e
        }
    },
}
</script>
<style scoped>
  .right{
      flex: 1;
      overflow: hidden;
  }
  .right h3{
      width:100%;
      height: 1rem;
      font: 600;
      font-size: 0.3rem;
      line-height: 1rem;

  }
  .show{
      float: left;
      width: 50%;
      text-align: center;
  }
  .show img{
      width: 1.5rem;
      margin: 0.2rem;
  }
</style>